<template>
  <!-- 某个 client 的路径选择器 -->
  <div style="color:black">
    <div class="full-path">{{currentPath}}</div>

    <n-spin :show="loadingFiles" class="file-item-wrapper">
      <div v-for="item,index in files" :key="'serverPath-'+index"
          :class="(choosed && choosed.path == item.path ? 'file-item item-choosed':'file-item')" 
          @dblclick="listNewFiles(item)" 
          @click="chooseFile(item)"> 
        <div v-if="item.dir">
          <n-icon><FolderOutlined/></n-icon>
        </div>

        <div class="name">
          <template v-if="item.name">
            <span :title="item.name">{{ item.name }}</span>
          </template>
          <template v-else>
            <span :title="item.path">{{ item.path }}</span>
          </template>
        </div>

        <template v-if="!item.dir">
          <div class="size"> 
            {{ item.sizeStr }}
          </div>
          <div class="time"> 
            {{ item.createTimeStr }}
          </div>
        </template>

      </div>
    </n-spin >

  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { FolderOutlined } from '@vicons/material'
import serverApi from '/src/api/fsync/server.js'

// 当前路径
const currentPath = ref(null)
// 文件
const files = ref([])
const loadingFiles = ref(false)

// 选中的文件
const choosed = ref(null)

const Message = inject("Message")

defineEmits([ "selected" ])

// 根据 client 查询路径
// const clientInfo = async (id) => {
//   await serverApi.clientInfo(id).then(res => {
//     client.value = res.data
//   }, err => {
//     Message.error( err.message, { closable: true, duration: 3000 } )
//     console.error(err)
//   })
// }

// 查询 server 下路径的文件
const listFiles = async () => {
  let data = {
    path: currentPath.value
  }
  loadingFiles.value = true
  await serverApi.listServer(data).then(res => {
    loadingFiles.value = false
    //files.value = res.data
    let newList = []
    // 顶部添加返回上一级路径
    if(currentPath.value) {
      let backup = { dir:true, name: '..', path: '..', absolutePath: '..' }
      newList.push(backup)
    }
    if(res.data) {
      newList = newList.concat(res.data)
    }
    
    newList.sort(sortCompare)
    files.value = newList
  }, err => {
    loadingFiles.value = false
    Message.error( err.message, { closable: true, duration: 3000 } )
    console.error(err)
  })
}

const listNewFiles = (item) => {
  //choosed.value = null // 双击的时候清掉选择的文件
  if(!item.dir) {
    return
  }

  let newPath = item.absolutePath
  if(newPath == '..') {
    let firstIndex =  currentPath.value.indexOf('/')
    let lastIndex =  currentPath.value.lastIndexOf('/')

    if(firstIndex == -1 && lastIndex == -1) {
      firstIndex =  currentPath.value.indexOf('\\')
      lastIndex =  currentPath.value.lastIndexOf('\\')
    }

    // if(firstIndex == -1 && lastIndex == -1) { // 所有根路径
    // if(lastIndex == -1) {
    if(firstIndex == lastIndex && lastIndex+1==currentPath.value.length) { // 所有根路径
      currentPath.value = null 
    } else { // 普通返回上一级
      currentPath.value =  currentPath.value.substring(0, lastIndex) 
      // 根路径，需要保留最后一个文件分隔符
      if(firstIndex == lastIndex) {
        currentPath.value += "/"
      }
    }
  } else {
    currentPath.value = newPath
  }
  listFiles()
}

// 文件和文件夹排序函数 
const sortCompare = (a,b) => {
  if(a.dir && !b.dir) {
    return -1;
  }
  if(!a.dir && b.dir) {
    return 1;
  }

  return a - b
}
// 选中文件或文件夹
const chooseFile = (fileNode) => {
  choosed.value = fileNode
}

const show = async (path) => {
  //await clientInfo(id)
  currentPath.value = path
  await listFiles()
}
const clear = () => {
  currentPath.value = null
  files.value = []
}
const getChoosed = () => {
  return choosed.value
}

defineExpose({
  show, clear, getChoosed,
})

</script>

<style scoped lang="scss">
.full-path{
  min-height: 1.5em;
  max-height: 6em;
  font-size: 0.8em;
  border-bottom: 1px dashed #b9b2c7;
}
.file-item-wrapper{
  padding: 0.4em;
  min-height: 16em;
  //background-color: rgb(233, 201, 159);
}
.file-item{
  padding: 0.1em 0.2em;
  display: flex;
  cursor: pointer;
  .name{
    flex: 1;
  }

  &:hover{
    background-color: antiquewhite;
  }

  .size, .time{
    font-size: 0.8em;
  }
  .time{
    margin-left: 1em;
  }
}
.item-choosed{
  background-color: #e6ecf5;
}
</style>
